<template>
  <div>
    <BannerVue></BannerVue>
    <div class="content">
      <div class="banxin">
        <div class="title">
          <img src="../../assets/line.png" alt=""> 
          <span>联系我们</span>
        </div>
        <div class="info">
          <p>我们不断要求自身与时俱进，同时致力于促进行业发展，我们期待您的宝贵意见!</p>      
        </div>
        <form action="#" class="form">
          <textarea @input="getOpinoin" name="fname" placeholder="| 请留下您的宝贵意见"></textarea>
          <img @click="submit" src="../../assets/submit.png" alt="">
        </form>
      </div>
    </div>
    <FootVue></FootVue>
  </div>
</template>

<script>
import BannerVue from '@/components/Banner/index.vue'
import FootVue from '@/components/Foot/index.vue'
import {ref} from 'vue'
import request from '@/utils/request'


export default {
  name: 'ContactVue',
  components: {
    BannerVue,
    FootVue
  },
  setup () {
    const opinoin = ref()
    const getOpinoin = (val)=>{
      opinoin.value = val.data
    }
    const submit  = ()=>{
      if(opinoin.value){
        console.log('submit',opinoin.value);
        request.post('/admin/save', {
          suggestion: opinoin.value
        }).then(res=>{
          console.log(res,'submit');
          if(res.data=='success'){
            opinoin.value = ''
            alert('提交成功，感谢您的建议！')
            window.location.reload();
          }else{
            alert('提交失败，请稍后重试！')
          }
        })
      }else{
        alert('请填写意见再提交')
      }
    }
    return {
      opinoin,
      getOpinoin,
      submit
    }
  }
}
</script>

<style lang="scss" scoped>
.active{
  color: rgba(0, 96, 255, 1);
}
.content{
  height: 8.75rem;
  padding: .625rem 0;
  .title{
    display: flex;
    align-items: center;
    font-weight: 700;
    img{
      margin-right: .125rem;
      height: .375rem;
    }
    span{
      font-size: .3rem;
    }
  }
  .info{
    color: rgba(102, 102, 102, 1);
    line-height: .375rem;
    margin-top: .625rem;
  }
  .form{
    margin-top: .625rem;
    textarea{
      height: 3.75rem;
      width: 100%;
      outline: none;
      border: none;
      padding: .25rem;
      line-height: .375rem;
      color: rgba(102, 102, 102, 1);
      background-color: rgba(244, 248, 255, 1);
    }
    img{
      width: 1.25rem;
      margin-top: .375rem;
      cursor: pointer;
    }
  }
}

</style>